<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Pickers</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Android, programming, Pickers, tutorial, 
Java, mobile development">
<meta name="description" content="In this chapter of the Android tutorial, we will
talk about android pickers.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>Pickers</h1>


<p>
In this chapter of the Android development tutorial we will talk about android
Pickers. Pickers are widgets that enable us to select a single value from a set of values.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
There are number, date or time pickers. 
</p>


<h2>NumberPicker</h2>
 
<p>
<i>NumberPicker</i> is a widget that allows us to select a number from 
a predefined range of values. The manifest file is not modified in this
example.
</p>

<div class="codehead">main.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    &gt;
    
    &lt;NumberPicker android:id="@+id/npId"
      android:layout_marginTop="5dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" /&gt;

    &lt;TextView
        android:id="@+id/tvId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp" 
        android:layout_marginLeft="5dp"
        android:text="0"
        android:textSize="30sp" /&gt;      
        
&lt;/LinearLayout&gt;
</pre>

<p>
In the layout file we have a NumberPicker widget and a TextView widget.
The TextView widget will display the selected value of the NumberPicker.
</p>

<div class="codehead">strings.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;string name="app_name"&gt;NumberPicker&lt;/string&gt;
&lt;/resources&gt;
</pre>

<p>
The strings resource file.
</p>

<div class="codehead">MainActivity.java</div>
<pre class="code">
package com.zetcode.numpick;

import android.app.Activity;
import android.os.Bundle;
import android.widget.NumberPicker;
import android.widget.TextView;
import android.widget.NumberPicker.OnValueChangeListener;

public class MainActivity extends Activity
{
    private TextView tv;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        setupUI();
    }

    public void setupUI()
    {
        tv = (TextView) findViewById(R.id.tvId);

        NumberPicker np = (NumberPicker) findViewById(R.id.npId);

        np.setOnValueChangedListener(new OnValueChangeListener()
        {
            public void onValueChange(NumberPicker picker, int oldVal, 
                int newVal)
            {
                tv.setText(String.valueOf(newVal)); 
            }        
        });

        np.setMaxValue(100);
        np.setMinValue(0);
    }
}
</pre>

<p>
Clicking on the plus and minus signs of the NumberPicker we select a new value. 
The currently selected value is displayed in the TextView widget.
</p>

<pre class="explanation">
NumberPicker np = (NumberPicker) findViewById(R.id.npId);
</pre>

<p>
A reference to the <code>NumberPicker</code> widget is retrieved from 
the main.xml file. 
</p>

<pre class="explanation">
np.setOnValueChangedListener(new OnValueChangeListener()
{
    public void onValueChange(NumberPicker picker, int oldVal, 
        int newVal)
    {
        tv.setText(String.valueOf(newVal)); 
    }        
});
</pre>

<p>
A <code>OnValueChangeListener</code> is added to the NumberPicker widget.
It will call the <code>onValueChange()</code> method when the value of
the NumberPicker is changed. Inside this method, we set the currently selected
value to the TextView widget. 
</p>

<pre class="explanation">
np.setMaxValue(100);
np.setMinValue(0);
</pre>

<p>
We set the maximum and minimum value for the NumberPicker.
</p>

<img src="/img/java/android/numberpicker.png" alt="NumberPicker widget">
<div class="figure">
Figure: NumberPicker widget
</div>


<h2>TimePicker</h2>
 
<p>
A <i>TimePicker</i> is a widget for selecting the time of day. It has two modes,
24 hour or AM/PM mode. Selection of the hour and minute digit can be conrolled by 
vertical spinners. A <i>DatePicker</i> is a widget for selecting a date. It is
very similar to the TimePicker.
</p>

<p>
The manifest file is not modified.
</p>

<div class="codehead">main.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    &gt;
    
    &lt;TimePicker android:id="@+id/tpId"
      android:layout_marginTop="5dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" /&gt;

    &lt;TextView
        android:id="@+id/tvId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp" 
        android:layout_marginLeft="5dp"
        android:textSize="30sp" /&gt;  
        
&lt;/LinearLayout&gt;
</pre>

<p>
In the <i>main.xml</i> file we have a TimePicker and TextView widgets.
The selected time is displayed in the TextView.
</p>

<div class="codehead">strings.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;string name="app_name"&gt;TimePicker&lt;/string&gt;
&lt;/resources&gt;
</pre>

<p>
This is the <i>strings.xml</i> resource file. 
</p>


<div class="codehead">MainActivity.java</div>
<pre class="code">
package com.zetcode.timepicker;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TimePicker;
import android.widget.TextView;
import android.widget.TimePicker.OnTimeChangedListener;

public class MainActivity extends Activity
{
    private TextView tv;
    
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        setupUI();
    }

    public void setupUI()
    {
        tv = (TextView) findViewById(R.id.tvId);

        TimePicker tp = (TimePicker) findViewById(R.id.tpId);
        displayCurrentTime(tp);

        tp.setOnTimeChangedListener(new OnTimeChangedListener()
        {
            public void onTimeChanged(TimePicker view, int hourOfDay, 
                int minute)
            {
                StringBuilder tm = new StringBuilder();
                tm.append(hourOfDay);
                tm.append(" h "); 
                tm.append(minute);
                tm.append(" m");
                tv.setText(tm); 
            }        
        });
    }

    public void displayCurrentTime(TimePicker tp)
    {
        int h = tp.getCurrentHour();
        int m = tp.getCurrentMinute();

        StringBuilder tm = new StringBuilder();
        tm.append(h);
        tm.append(" h "); 
        tm.append(m);
        tm.append(" m");
        tv.setText(tm);         
    }
}
</pre>

<p>
The TimePicker listens to the <code>OnTimeChangedListener</code>. When the time
is changed, the new time value is set to the TextView inside
the <code>onTimeChanged()</code> method.
</p>

<pre class="explanation">
tp.setOnTimeChangedListener(new OnTimeChangedListener()
{
    public void onTimeChanged(TimePicker view, int hourOfDay, 
        int minute)
    {
        StringBuilder tm = new StringBuilder();
        tm.append(hourOfDay);
        tm.append(" h "); 
        tm.append(minute);
        tm.append(" m");
        tv.setText(tm); 
    }        
});
</pre>

<p>
Inside an anonymous <code>OnTimeChangedListener</code> class we implement
the <code>onTimeChanged()</code> method. With the StringBuilder we build the
string to be displayed and set it to the TextView widget. 
</p>

<pre class="explanation">
public void displayCurrentTime(TimePicker tp)
{
    int h = tp.getCurrentHour();
    int m = tp.getCurrentMinute();

    StringBuilder tm = new StringBuilder();
    tm.append(h);
    tm.append(" h "); 
    tm.append(m);
    tm.append(" m");
    tv.setText(tm);         
}
</pre>

<p>
When the activity is first shown, we display the current time.
</p>


<img src="/img/java/android/timepicker.png" alt="TimePicker">
<div class="figure">
Figure: TimePicker widget
</div>

<p>
In this chapter of the Android development tutorial, we have written about Pickers.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br> 



<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified November 21, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

